#{extends 'main.html' /}
#{set title:'Home' /}
#{set 'moreStyles'} 
<link rel="stylesheet" type="text/css" media="screen" href="@{'/public/stylesheets/dialog.css'}"/>
<style>
  #editMe {
     width: 600px;
     height: 300px;
     background-color: white;
     border: 1px solid grey;
  }
</style> 
#{/set}

<h1>goog.editor Hello World plugins Demo</h1> 
<p>This demonstration of an editable field with the two sample plugins
   installed: goog.editor.plugins.HelloWorld and
   goog.editor.plugins.HelloWorldDialogPlugin,
   is copied from <a href="http://closure-library.googlecode.com/svn/trunk/closure/goog/demos/editor/helloworld.html">the google closure demo page</a>.</p> 
<br> 
<button onclick='helloworld.doHelloWorld()'>Hello World</button> 
<button onclick='helloworld.doHelloWorldDialog()'>Hello World Dialog</button><br> 
<div id='editMe'><ul> 
  <li>Click <b>Hello World</b> to insert "Hello World!".</li> 
  <li>Click <b>Hello World Dialog</b> to open a dialog where you can customize
      your hello world message to be inserted.</li> 
</ul>The hello world message will be inserted at the cursor, or will replace
  the selected text.</div> 
<hr> 
<p><b>Current field contents</b> 
  (updates as contents of the editable field above change):<br> 
<textarea id="fieldContents" style="height:100px;width:400px;"></textarea><br> 
<input type="button" value="Set Field Contents"
      onclick='helloworld.setFieldHtml()' /> 
  (Use to set contents of the editable field to the contents of this textarea)
</p> 
<script src="@{'/public/javascripts/helloworld.js'}"></script>
